<template>
  <div id="home">
    <transition name="fade">
      <div class="home-left" v-show="leftShow">
        <mune />
      </div>
    </transition>

    <div class="home-right">
        <nav-bar class="nav-bar">
            <div slot="left" class="left" @click="leftShow=!leftShow"> <img  src="~assets/left.png" > </div>
            <div slot="center" class="logo"> <img src="~assets/logo.png" > </div>
        </nav-bar>

        <scroll class="show-video" 
        ref="scroll" 
        :probe-type="2" 

        >
          <video-list ref="videoList"/>
          
        </scroll>
      </div>
  </div>
</template>

<script>
import navBar from "components/common/navBar/navBar"
import scroll from "components/common/scroll/Scroll"

import videoList from "components/content/showVideo/videoList"

import mune from "views/home/mune"


export default {
  name: "Home",
  components: {
    navBar,
    videoList,
    scroll,
    mune
  },
  data(){
    return {
      leftShow : false
    }
  },
  mounted(){
    this.$nextTick(( ) => {
      this.$refs.scroll.scroll.refresh()})
  }
}
</script>

<style lang="less" scoped>

#home {
  width: 10rem;
  height: calc(100vh - 1.33rem);
  overflow: hidden;
  display: flex;
  .fade{
    overflow: hidden;
    .home-left{
      width: 6.6rem;
      height: calc(100vh-1.33rem);
      background-color: rgb(103, 94, 84);
    }
  }

  .home-right {
    flex: 1;
    height: calc(100vh - 1.33rem);
    overflow: hidden;
    background-color: rgb(216, 209, 201);
    z-index: 0;
    .nav-bar{
      background-color: rgb(224, 131, 100);
      width: 10rem !important;
      .logo {
        img {
          width: 2rem !important; 
          height: 0.666rem;
          margin-top: 0.3rem;
        }
      }
      .left{
        img{
          display: inline-block;
          width: 1.3rem;
          height: 1.1rem;
        }
      }
    }
    .show-video {
      width: 9.7rem;
      height: calc(100vh - 2.65rem);
      margin: 0.1rem auto;
      overflow: hidden;
      background-color: rgb(216, 209, 201);
    }
  }
}
.fade-enter{
  width: 0px;
}
.fade-enter-active ,.fade-leave-active{
 transition: width 1s;
}
.fade-enter-to ,.fade-leave{
  width: 5.33rem;
}
.fade-leave-to {
  width: 0px;
}





</style>
